<!--
*******************************************************************************
 * Copyright © 2021-2022 VMware, Inc. All Rights Reserved.
 *
 * Licensed under the Apache License, Version 2.0 (the "License"); you may not use this file except
 * in compliance with the License. You may obtain a copy of the License at
 *
 * http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software distributed under the License
 * is distributed on an "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
 * or implied. See the License for the specific language governing permissions and limitations under
 * the License.
 *
 * @author: Huaqiao Zhang, <huaqiaoz@vmware.com>
 *******************************************************************************
 -->

<div class="card">
    <div class="card-header">
        <i class="fa fa-plus text-danger"></i>
        Add Interval
        <button class="btn btn-sm btn-success float-right" (click)="submit()" [disabled]="!interval.name || !interval.interval">Submit</button>
    </div>
    <div class="card-body">
        <form>
            <div class="form-group row has-validation">
                <label for="intervalName" class="col-md-2 col-form-label" required>Name</label>
                <div class="col-md-10">
                    <input type="text" class="form-control" id="validationIntervalName" [class.is-invalid]="!interval.name" [class.is-valid]="interval.name" name="intervalName" [(ngModel)]="interval.name" required>
                    <div id="validationIntervalNameFeedback" class="invalid-feedback">
                        <small>the interval name can't be empty!</small> 
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="intervalStart" class="col-md-2 col-form-label">Start</label>
                <div class="col-md-10">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                        </div>
                        <input type="text" class="form-control" name="intervalStart" [(ngModel)]="interval.start">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="intervalEnd" class="col-md-2 col-form-label">End</label>
                <div class="col-md-10">
                    <div class="input-group mb-3">
                        <div class="input-group-prepend">
                            <span class="input-group-text"><i class="fa fa-calendar"></i></span>
                        </div>
                        <input type="text" class="form-control" name="intervalEnd" [(ngModel)]="interval.end">
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="intervalInterval" class="col-md-2 col-form-label">
                    <span class="mr-2">Interval</span> 
                    <span class="fa fa-question-circle-o fa-lg" role="button" data-html="true" data-animation="true"  data-trigger="focus" data-toggle="popover" title="format tips" 
                    data-content='Interval indicates how often the specific resource needs to be polled. It represents as a duration string. The format of this field is to be an unsigned integer followed by a unit which may be "ns", "us" (or "µs"), "ms", "s", "m", "h" representing nanoseconds, microseconds, milliseconds, seconds, minutes or hours. Eg, "100ms", "24h"'></span>
                </label>
                <div class="col-md-10">
                    <input type="text" class="form-control" name="intervalInterval" [class.is-invalid]="!interval.interval" [class.is-valid]="interval.interval" [(ngModel)]="interval.interval" required>
                    <div id="validationIntervalIntervalFeedback" class="invalid-feedback">
                        <small>the interval interval can't be empty!</small> 
                    </div>
                </div>
            </div>
            <div class="form-group row">
                <label for="intervalRunOnce" class="col-md-2 col-form-label">RunOnce</label>
                <div class="col-md-10">
                    <select class="custom-select" name="intervalRunOnce" [(ngModel)]="interval.runOnce">
                        <option [ngValue]="false">false</option>
                        <option [ngValue]="true">true</option>
                    </select>
                </div>
            </div>
        </form>
    </div>
</div>